<template>
  <div id="app">
    <!-- 全局组件注册完可以直接使用 -->
    <Banner />

    <div class="box">
      <!-- 自定义事件  父子组件通讯的一种方式 -->
      <!-- 实质就是 父组件传给子组件一个函数，由子组件在合适的时候调用函数，传递实参(数据) -->
      <!-- 用法1 父组件 @自定义事件名称="回调"  -->
      <!-- 用法2 父组件 this.$refs.xxx.$on(自定义事件名称,回调)      -->
      <!--      子组件 this.$emit(自定义事件名称,数据) -->
      <CustomEvents @custom="handler" ref="custom"/>   <!-- 给子组件绑定自定义事件 方式一 -->
    </div>
    
     <!-- 自定义指令 -->
    <CustomDirective/>
  </div>
</template>

<script>
import CustomEvents from "./components/CustomEvents.vue";
import CustomDirective from "./components/CustomDirective.vue"
export default {
  name: "App",
  components: {
    CustomEvents,
    CustomDirective
  },
  methods: {
    //父传给子组件的函数
    handler(value) {
      console.log("子组件传来的数据", value);
    },
  },
  mounted(){
    //给子组件绑定自定义事件 方式二
    this.$refs.custom.$on('custom',(value)=>{console.log("子组件传来的数据", value)})
  }
};
</script>

<style>
/* 要想在组件中使用less样式 需要下载 less，less-loader (npm i less less-loader)*/
/* 然后在style标签添加 lang='less'*/
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.box {
  border: 1px solid #000;
  margin-top: 10px;
}
</style>
